<div id="app">
    <admin-page-header :title="$pageData.title">
        
        <bi-button icon="fa-paint-brush" type="light" @click="handlePageStyle()">页面样式</bi-button>
        <bi-button icon="fa-save" type="primary" @click="handleSave()">保存</bi-button>
        <bi-button icon="fa-save" type="primary" @click="handleSaveOther()">另存为</bi-button>
        <bi-button icon="fa-send" type="info" @click="handlePublish()">发布</bi-button>

        <template #title>
            <div class="design-list-box">
                <bi-select v-model="design_id" :clear="false" style="width: 150px;" :loading="designListLoading">
                    <bi-select-option  v-for="(item,index) in $pageData.designList" :key="index" :value="item.design_id" :label="item.title"  ></bi-select-option>
                </bi-select>
                <bi-icon data="fa-pencil" @click="handleRename()"></bi-icon>
                <bi-icon data="fa-trash"  @click="handleDelDesign()" v-if="$pageData.designList.length>1"></bi-icon>
            </div>
        </template>
    </admin-page-header>
    <div class="container-editor" @dragstart="handleDragStart($event)" @dragover="handleDragOver($event)" >
       <div class="model-list-box" >
        <bi-collapse :label="groupItem.title"  v-for="(groupItem,index) in group" :key="index">
            <div class="model-list">
                <div class="model-item"  draggable="true"  v-for="(modelItem,index) in groupItem.list" :key="modelItem.name" :data-name="modelItem.name" :data-column="modelItem.column" >
                    <div class="drag-mask"></div>
                    <img :src="modelItem.icon" alt="" />
                    <div class="title">{{modelItem.title}}</div>
                </div>
            </div>
        </bi-collapse>
       </div>
       <div class="editor-preview">
            <model-preview v-if="!loading" :page-style="pageStyle" :list="rowList" @update="updateList" ></model-preview>
       </div>
       <div class="editor-option-box">
            <model-editor ref="editor" ></model-editor>
       </div>
    </div>
</div>


<script>
import {group,list} from './design/modelList.js';
import modelPreview from './design/preview.vue';
import modelEditor  from './design/editor.vue';

import pageStyleDialog from './design/page-style-dialog.vue';
import designTitleDialog from './design/design-title-dialog.vue';
group.map(groupItem=>{
    let info = [];
    groupItem.list.map(name=>{
        if (list[name]){
            info.push({
                name:name,
                title:list[name].title,
                icon:list[name].icon,
                column:list[name].column.join(',')
            });
        }
    });
    groupItem.list = info;
});


let app = admin.createApp({
    components:{
        modelPreview,
        modelEditor
    },
    provide(){
        return {
            updateModelParam:(rowIndex,modelIndex,modelId,param)=>{
                this.modelRefresh[modelId](param);
                this.rowList[rowIndex].modelList[modelIndex].param = param;
            },
            modelInit:(modelId,refresh)=>{
                this.modelRefresh[modelId] = refresh;
            },
            modelFocus:(rowIndex,modelIndex,modelId,type)=>{
                if (type=='empty'){
                    this.$refs.editor.hideModel();
                }else{
                    let name =  this.rowList[rowIndex].modelList[modelIndex].type;
                    let param  = this.rowList[rowIndex].modelList[modelIndex].param;
                    let rowType = this.rowList[rowIndex].type;
                    this.$refs.editor.showModel(rowIndex,rowType,modelIndex,modelId,name,param);
                }
            },
        }
    },
    data(){
        return {
            rowList:[],
            pageStyle:{},
            group,
            design_id:this.$pageData.design_id,
            loading:true,
            designListLoading:false,
            update_time:0,
            modelRefresh:{}
        }
    },
    watch:{
        design_id(val){
            if (val!= this.$pageData.design_id){
                this.$go({action:'design',gets:{id:val}});
            }
        }
    },
    methods:{
        getDesign(){
            console.log(this.design_id);
            this.loading = true;
            this.$loading();
            this.$ajax({
                url:this.$url({action:'GetDesign'}),
                data:{
                    design_id:this.design_id
                },
                success:(res)=>{
                    this.loading = false;
                    this.$loading(false);
                    this.rowList = res.content??[];
                    this.pageStyle = res.style??{};
                    this.update_time = res.update_time;
                }
            })
        },
        handleDragStart(e){
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('name',e.target.getAttribute('data-name'));
            e.dataTransfer.setData('column',e.target.getAttribute('data-column'));
        },
        handleDragOver(e){
            e.preventDefault();
        },
        handleSave(){
            
            this.$ajax({
                url:this.$url({action:'SaveDesign'}),
                data:{
                    design_id:this.design_id,
                    page_id:this.$pageData.page_id,
                    content:JSON.stringify(this.rowList),
                    style:JSON.stringify(this.pageStyle),
                    update_time:this.update_time
                },
                success:(res)=>{
                    this.update_time = res.update_time;
                    this.$toast('保存成功');
                }
            })
        },
        updateList(list){
            this.rowList = list;
        },
        handlePageStyle(){
            this.$dialog({
                type:'vue',
                content:admin.createApp(pageStyleDialog,{param:this.pageStyle}),
                callback:(style)=>{
                    this.pageStyle = style;
                }
            });
        },
        handleRename(){

 
           let title =  this.$pageData.designList.filter(item=>item.design_id==this.design_id)[0].title;

            this.$dialog({
                title:'修改设计稿名称',
                type:'vue',
                content:admin.createApp(designTitleDialog,{title}),
                callback:(title)=>{
                    this.$pageData.designList[0].title = title;
                    this.designListLoading = true;
                    this.$ajax({
                        url:this.$url({action:'RenameDesign'}),
                        data:{
                            design_id:this.design_id,
                            title
                        },
                        success:(res)=>{
                            this.designListLoading = false;
                            this.$toast('保存成功');
                        }
                    })

                }
            });
        },
        handleSaveOther(){
            this.$dialog({
                title:'另存为',
                type:'vue',
                content:admin.createApp(designTitleDialog,{}),
                callback:(title)=>{
                    this.designListLoading = true;
                    this.$ajax({
                        url:this.$url({action:'SaveDesignOther'}),
                        data:{
                            title,
                            page_id:this.$pageData.page_id,
                            content:JSON.stringify(this.rowList),
                            style:JSON.stringify(this.pageStyle)
                        },
                        success:(res)=>{
                            this.designListLoading = false;
                            this.$pageData.designList = res.list;
                            this.$confirm('需要切换到新的设计稿吗？',()=>{
                                this.design_id  =  res.design_id;
                                
                                this.getDesign();
                            });

                            this.$toast('保存成功');
                        }
                    })
                }
            })
        },
        handleDelDesign(){

            //获取前面或者后面的一个设计稿
            let index = this.$pageData.designList.findIndex(item=>item.design_id==this.design_id);
            let nextDesign = '';
            if (index>0){
                nextDesign = this.$pageData.designList[index-1].design_id;
            }else{
                nextDesign = this.$pageData.designList[index+1].design_id;
            }
            
            //获取删除后的设计稿列表
            let list = this.$pageData.designList.filter(item=>item.design_id!=this.design_id);

            
            this.$confirm('确定删除该设计稿吗？',()=>{
                this.designListLoading = true;
                this.$ajax({
                    url:this.$url({action:'DelDesign'}),
                    data:{
                        design_id:this.design_id,
                       
                    },
                    success:(res)=>{
                        this.design_id  =  nextDesign;
                        this.$pageData.designList = list;
                        this.designListLoading = false;
                        this.$toast('删除成功');
                        this.getDesign();
                    }
                })
            })
        },
        handlePublish(){
            this.$confirm({text:'发布会保存当前稿和覆盖线上页面，确定发布该设计稿吗？',type:"warning"},()=>{
                this.$ajax({
                    url:this.$url({action:'Publish'}),
                    data:{
                        design_id:this.design_id,
                        content:JSON.stringify(this.rowList),
                        style:JSON.stringify(this.pageStyle)
                    },
                    success:(res)=>{
                        this.update_time = res.update_time;
                        this.$toast('发布成功');
                    }
                })
            });
        },
        
    },
    mounted(){
       //this.design_id = this.$pageData.designList[0].design_id;
       this.getDesign();
    },

}).mount('#app');
</script>
<style>
.container-editor{
    height: calc( 100vh - 120px );
    width: 100%;
    margin-top: -10px;
    display: flex;
}

.container-editor .model-list-box{
    width: 300px;
    border-right: 1px solid #eee ;
    overflow-y: auto;
    background-color: #FFF;
}
.model-list-group .group-header{
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
}

.model-list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 10px;
}


.model-list .model-item{
    cursor: pointer;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 5px;
    background-color: #FFF;
    position: relative;
}

.model-list .model-item .drag-mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
}

.model-list .model-item img{
    width: 60px;
    height: 60px;
}
.model-list .model-item .title{
    text-align: center;
    font-size: 14px;
    height: 20px;
    overflow: hidden;
    line-height: 20px;
}

.container-editor .editor-preview{
    flex: 1;
    overflow-y: auto;
    padding-top: 10px;
}

.container-editor .editor-option-box{
    width: 400px;
    border-left: 1px solid #eee ;
    overflow-y: auto;
    background-color: #FFF;
}

.design-list-box{
    display: flex;
    gap: 10px;
    padding-left: 10px;
    align-items: center;
}
.design-list-box .bi-icon{
    color: var(--bs-gray-600);
    cursor: pointer;
}

.design-list-box .bi-icon:hover{
    color: var(--bs-gray-700);
}
</style>